<template>
  <div>
    <transition>
      <div class="mask" v-show="visible"></div>
    </transition>
  </div>
</template>

<script>
export default {
    props:['visible']

}
</script>

<style scoped>
.mask{
    position: fixed;
    left: 20%;
    top: 20%;
    right: 20%;
    bottom: 20%;
    background: rgb(86, 13, 25);
    z-index: 100;
}

.v-enter{
    transform: scale(0);
}

.v-enter-active{
    transition: all 3s;
}

.v-enter-to{
    transform: scale(1);
}
.v-leave{
    transform: scale(1);
}
.v-leave-active{
    transition: all 3s;
}
.v-leave-to{
    transform: scale(0);
}
</style>